<template>
	<view class="demo">
		<view class="container" >
			<!-- 团体入园凭证 -->
			<view class="ticket-header">个人入园凭证</view>
			<view class="time">2024年6月{{ personalInfo.selectedDate }}日 {{ personalInfo.selectedTime }}</view>



			<!-- 个人信息 -->
			<text class="section-title">预约信息</text>
			<view class="info-section">

				<view class="info-item">
					<text class="item-label">姓名：</text>
					<text class="item-value">{{ personalInfo.name }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">证件类型：</text>
					<text class="item-value">{{ personalInfo.certificateType }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">证件号码：</text>
					<text class="item-value">{{ personalInfo.certificateNumber }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">手机号码：</text>
					<text class="item-value">{{ personalInfo.phoneNumber }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">同行儿童数：</text>
					<text class="item-value">{{ personalInfo.childCount }}人</text>
				</view>
				<view class="info-item">
					<text class="item-label">同行成人：</text>
					<text class="item-value" v-for="(item,index) in personalInfo.companions" :key="index">{{item.name}}
						<font v-if="index != personalInfo.companions.length-1">、</font>
					</text>
				</view>
			</view>

			<!-- 提示信息 -->
			<view class="tips">园区花草，种植不易请爱护</view>


		</view>
		<!-- 倒计时提示 -->
		<view class="countdown-tips">离凭证消失剩余<text
				class="countdown-tips-time">{{ countdown }}小时{{ minutes }}</text>分钟。可发起新的预约
		</view>
		
		<button class="tijiao" @click="toreserve">
			<text class="tijiao1">查看预约记录</text>
		</button>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';


	onLoad((options) => {
		console.log(options)
		personalInfo.value = JSON.parse(options.params);
		personalInfo.value.childCount = personalInfo.value.childCount || 0;
		console.log(personalInfo.value)
	})
	const personalInfo = ref({});

	// const adultNamesString = computed(() => data.personalInfo.adultNames.join('、'));
	const countdown = ref(3); // 小时数
	const minutes = ref(56); // 分钟数
	let toreserve = function() {
		// 设置全局数据
		getApp().globalData.reserveRecordInfo = {
			personalInfo: personalInfo.value,
			countdown: countdown.value,
			minutes: minutes.value,
			type: '个人预约'
		};

		// 跳转到 tabBar 页面
		uni.switchTab({
			url: '/pages/reserveRecord/reserveRecord'
		});
	};
</script>

<style scoped>
	.demo {
		padding: 12px;
	}

	.container {

		padding: 20rpx;
		padding-top: 33px;
		background-image: url(../../static/bg3.png);
		background-size: cover;

	}

	.ticket-header {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.time {
		color: #666;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.info-section {
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 24rpx;
		margin-bottom: 40rpx;
	}

	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
		margin-top: 80px;
	}

	.info-item {

		align-items: center;
		padding: 10px 0;
	}

	.item-label {
		width: 200rpx;
		color: #333;
		font-size: 28rpx;
	}

	.item-value {
		flex-grow: 1;
		text-align: right;
		color: #666;
		font-size: 26rpx;
		color: #000;
	}

	.tips {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		margin: 60px 0;
	}

	.countdown-tips {
		text-align: center;

		color: #5f5f5f;
		font-size: 12px;
		margin-top: 60rpx;
	}

	.countdown-tips-time {
		color: #8DCB6D;
	}
	.tijiao{
		margin: 15px;
		
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
	}
	.tijiao1 {
		width: 68px;
		height: 24px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	
</style>